<template>
  <div class="right-page">
    <!-- 添加、编辑 菜单 -->
    <add-menu 
      :show="showMenuEdit" 
      :editType="editType"
      :parent="showMenuParent"
      :item="showMenuItem"
      :editContentType="editContentType"
      @close="showMenuEdit = false" 
      @closeAndRefresh="closeAndRefresh"/>

    <draggable v-model="list" :disabled="!isEdit" @end="onGroupEnd(list)" draggable=".group-box" handle=".draggable1-box" animation="250">
      <div class="group-box" v-for="(item1, index) in list" :key="index">
        <!-- 父二级菜单 -->
        <div class="group-title-box">
          <div class="group-title">{{item1.menuName}}</div>
          <div class="home-menu-icon-group-1" v-if="isEdit" @click.stop="">
            <i class="home-menu-icon el-icon-edit" @click="editMenu(item1, 0)"></i>
            <i class="home-menu-icon el-icon-delete" @click="deleteMenu(item1)"></i>
            <div class="home-menu-icon draggable1-box">
              <svg-icon icon-class="draggable" class="draggable-icon"/>
            </div>
          </div>
        </div>
        
        <!-- 子菜单 -->
        <draggable class="item-group" v-model="item1.menuList" :disabled="!isEdit" @end="onItemEnd(item1)" draggable=".item-menu-box" handle=".draggable2-box" animation="250">
          <template v-for="(item2, index) in item1.menuList" >
            <div class="item-menu-box" :key="index" >
              <a class="item-menu" :href="item2.menuUrl" target="_blank">
                <div class="item-title">{{item2.menuName}}</div>
                <div class="item-info">{{item2.menuInfo}}</div>
              </a>

              <div class="home-menu-icon-group" v-if="isEdit" @click.stop="">
                <i class="home-menu-icon el-icon-edit" @click="editMenu(item2, 1)"></i>
                <i class="home-menu-icon el-icon-delete" @click="deleteMenu(item2)"></i>
                <div class="home-menu-icon draggable2-box">
                  <svg-icon icon-class="draggable" class="draggable-icon"/>
                </div>
              </div>
            </div>
          </template>
          <!-- 添加子菜单 -->
          <div class="add-menu add-menu-sub"  v-if="isEdit" @click="addMenu(item1, 1)">
            <i class="el-icon-plus avatar-uploader-icon"/>
          </div>
        </draggable>
      </div>
    </draggable>

    <!-- 添加菜单 -->
    <div class="add-menu" v-if="isEdit" @click="addMenu(parent, 0)">
      <i class="el-icon-plus avatar-uploader-icon"/>
    </div>
  </div>
</template>

<script>
import AddMenu from '@/components/AddMenu.vue'
import Api from "@/utils/api.js"

export default {
  props: ["isEdit", "parent"],

  components:{
    AddMenu
  },  

  data(){
    return{

      // 菜单编辑
      showMenuEdit: false,
      showMenuItem: '',
      showMenuParent: '',
      editType:0,
      // 0：菜单名，1：菜单名 + url + 说明
      editContentType:0,

      list: [
      ]
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.refresh()
    })
  },

  methods:{
    // 新增菜单
    addMenu(parent, editContentType){
      this.editType = 0
      this.showMenuItem = ''
      this.showMenuParent = parent
      this.editContentType = editContentType
      this.showMenuEdit = true
    },

    // 编辑菜单
    editMenu(item, editContentType){
      this.editType = 1
      this.showMenuItem = item
      this.showMenuParent = ''
      this.editContentType = editContentType
      this.showMenuEdit = true
    },

    // 删除菜单
    deleteMenu(item){
      this.$confirm('确定删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {          
        this.$axios.post(Api.USER_MENU_DELETE, {id : item.id}).then(_ =>{
          this.refresh()
        }).catch(res =>{
          this.$message.warning(res.message);
        })
      }).catch(() => {});
    },

    // 关闭编辑编辑弹窗，并刷新
    closeAndRefresh(){
      this.showAddMenu = false
      this.refresh()
    },

    // 刷新菜单
    refresh(){
      this.$axios.post(Api.USER_MENU_LIST, {parentMenuId: this.parent.id}).then(res =>{
        this.showMenuEdit = false
        this.list = res
      }).catch(res =>{
        this.$message.warning(res.message);
      })
    },

    // 更新拖拽后的菜单组顺序
    onGroupEnd(groupList) {
      var list = []
      groupList.forEach((item,index) => {
        item.orderNum = index
        list.push({
          id: item.id,
          menuName: item.menuName,
          menuUrl: item.menuUrl,
          menuInfo: item.menuInfo,
          parentMenuId: item.parentMenuId,
          orderNum: item.orderNum,
        })
      })

      this.$axios.post(Api.USER_MENU_LIST_EDIT, list).catch(res =>{
        this.$message.warning(res.message);
      })
    },

    // 更新拖拽后的子菜单顺序
    onItemEnd (item) {
      item.menuList.forEach((item,index) => {
        item.orderNum = index
      } )
      this.$axios.post(Api.USER_MENU_LIST_EDIT, item.menuList).catch(res =>{
        this.$message.warning(res.message);
      })
    },
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.right-page {
  font-size: 15px;
  color: #353535;
  margin: 0 10px 50px;
  position: relative;

  .group-title-box{
    position: relative;
    .flex-center-start();
    padding-top: 15px;
    width: 100%;

    &:hover, &:active{
      .home-menu-icon-group-1 .home-menu-icon{
        display: flex;
      }
    }

    // 删除、编辑按钮
    .home-menu-icon-group-1{
      display: none;
      .flex-center-start();

      .home-menu-icon{
        color: #999999;
        padding: 5px;
        font-size: 15px;
        display: none;
        
        &:hover, &:active{
          color: #409EFF;
        }
      }

      .draggable1-box{
        cursor: move;
        .draggable-icon{
          font-size: 14px;
          color: #999;
        }
      }
    }

    .group-title{
      margin: 10px;
      font-size: 14px;
      color: #000000;
      font-weight: bold;
    }
  }

  // 添加菜单
  .add-menu{
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px;
    text-align: center;
    padding: 20px 0;

    &:focus, &:hover {
      color: #409eff;
      border-color: #409eff;
    }
  }

  .add-menu-sub{
    width: calc( (100% / 4) - 20px) ;
    margin: 10px;
    height: 100%;
  }

  .item-group{
    .flex();
    flex-wrap: wrap;
    width: 100%;

    .item-menu-box{
      width: calc( 100% / 5);
      margin: 10px 0;
      position: relative;

      &:hover, &:active{
        .home-menu-icon-group{
          display: flex;
        }
      }

      // 删除、编辑按钮
      .home-menu-icon-group{
        display: none;
        position: absolute;
        right: 15px;
        top: 5px;

        .home-menu-icon{
          color: #999999;
          padding: 5px;
          font-size: 15px;
          
          &:hover, &:active{
            color: #409EFF;
          }
        }

        .draggable2-box{
          cursor: move;
          .draggable-icon{
            font-size: 14px;
            color: #999;
          }
        }
      }

      .item-menu{
        min-height: 60px;
        margin: 0 10px;
        background-color: white;
        padding: 10px;
        cursor: pointer;
        .flex-start-between();
        flex-direction: column;
        border: 1px solid #dcdcdc;

        &:hover{
          background-color: #f5f7fa;
        }
        
        .item-title{
          color: #202d40;
          font-weight: 500;
          font-size: 14px;
        }

        .item-info{
          min-height: 12px;
          color: #999999;
          font-size: 12px;
          margin-top: 5px;
        }
      }  
    }
  }
}
</style>
